<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-for在对象中的使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 挂载点 -->
<div id="root">
    <div>
        <ul>
            <!-- v-for在对象中的使用-->
            <li v-for="value in student">{{value}}</li>
        </ul>
        <hr>
        <ul>
            <!-- v-for在对象中的使用索引、键、值 -->
            <li v-for="(value,key,index) in student">
                {索引：{{index}}||
                键：{{key}}||
                值：{{value}}}
            </li>
        </ul>
        <ul>
            <!-- 遍历一个对象数组，嵌套的for循环-->
            <li v-for="student in students">
                <span v-for="(value,key,index) in student">
                 {索引：{{index}}||
                键：{{key}}||
                值：{{value}}}
                </span>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript">
    // 实例
    new Vue({
        el: "#root",
        data: {
            student: {
                name: "xiaohua",
                age: 20
            },
            students: [
                {
                    name: "小明",
                    age: 21
                }, {
                    name: "小红",
                    age: 22
                }
            ]
        }
    })
</script>
</body>
</html>